<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {
	background-color: #fff;
	width: 100%;
	margin: auto;
}

.img {
	-webkit-transform: scale(0.6); /* Safari and Chrome - CSS3*/
	-moz-transform: scale(0.6); /* Firefox - CSS3*/
	-o-transform: scale(0.6);
	float: left;
	margin-left: -18px;
	margin-right: -50px;
	margin-top: -20px;
	-webkit-transition-duration: 0.5s; /* 5s - CSS3*/
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	background-color: #ffffff;
}

.img img {
	padding:15px;
	border: 1px solid #0055ff;
	width: 290px;
	height: 250px;
	box-shadow: 0px 0px 10px #00AAFF;
}

.img:hover {
	-webkit-transform: scale(0.8);
	-webkit-box-shadow: 0px 0px 30px #00AAFF;
	-moz-transform: scale(0.8);
	-moz-box-shadow: 0px 0px 30px #00AAFF;
	-o-transform: scale(0.8);
	-o-box-shadow: 0px 0px 30px #00AAFF;
}

.img .mask {
	width: 100%;
	background-color: #bbddff; 
	height: 100%;
	opacity: 0.4;
	cursor: pointer;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	position: absolute;
	
	font-size: 30px;
	color: red;
	font-weight: bold;
	text-align: center;
}

#img-1:hover .mask {
	height: 0%;
	margin-top: 130px;
}

#img-2:hover .mask {
	height: 0%;
	margin-top: 130px;
}

#img-3:hover .mask {
	height: 0%;
	margin-top: 130px;
}

#img-4:hover .mask {
	height: 0%;
	margin-top: 130px;
}

#img-5:hover .mask {
	height: 0%;
	margin-top: 130px;
}

#img-6:hover .mask {
	height: 0%;
	margin-top: 130px;
}

/*
#img-1:hover .mask {
	height: 0%;
} 

#img-4:hover .mask {
	margin-left: 219px;
	margin-top: 135px;
	height: 0%;
	width: 0%;
}

#img-3 #mask-1 {
	width: 50%;
}

#img-3 #mask-2 {
	width: 50%;
	margin-left: 160px;
}

#img-3:hover #mask-1 {
	width: 0%;
}

#img-3:hover #mask-2 {
	margin-left: 323px;
	width: 0%;
}

#img-5:hover .mask {
	margin-left: 219px;
	margin-top: 135px;
	height: 0%;
	width: 0%;
	-webkit-transform: rotateX(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(-360deg);
}

#img-6:hover .mask {
	margin-left: 219px;
	margin-top: 135px;
	height: 0%;
	width: 0%;
	-webkit-transform: rotateZ(750deg);
	-moz-transform: rotateZ(750deg);
	-o-transform: rotat(750deg);
}*/

</style>
</head>
<body>
	<table width="795" height="574" border="0" bgcolor="#FFFFFF"
		cellspacing="0" cellpadding="0">
		<tr>
			<td class="titleTable">:: TRANG CHỦ</td>
		</tr>
		<tr>
			<td>
				<div id="container">
					<div class='img' id='img-1'>
						<div class='mask'>MÔN HỌC</div>
						<a href="MonHoc.jsp"><img src='img/Icons/02.png' /></a>
					</div>
					<div class='img' id='img-2'>
						<div class='mask'>CHƯƠNG TRÌNH ĐÀO TẠO</div>
						<a href="CTDT.jsp"><img src='img/Icons/04.png' /></a>
					</div>
					<div class='img' id='img-3'>
						<div class='mask'>CHƯƠNG TRÌNH GIẢNG DẠY</div>
						<a href="CTGD.jsp"><img src='img/Icons/03.png' /></a>
					</div>
					<div class='img' id='img-4'>
						<div class='mask'>KHỐI KIẾN THỨC</div>
						<a href="KhoiKienThuc.jsp"><img src='img/Icons/01.png' /></a>
					</div>
					<div class='img' id='img-5'>
						<div class='mask'>HỌC KỲ - KHHT</div>
						<a href="HocKy_KHHT.jsp"><img src='img/Icons/05.png' /></a>
					</div>
					<div class='img' id='img-6'>
						<div class='mask'>HỌC KỲ - KHHT MÔN HỌC</div>
						<a href="HocKyKHHTCoMonHoc.jsp"><img src='img/Icons/06.png' /></a>
					</div>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>